<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>创建元素和添加元素</title>
    <style>
        div {
            margin: 10px 0px;
        }

        span {
            color: white;
            padding: 8px
        }

        .red {
            background-color: red;
        }

        .blue {
            background-color: blue;
        }

        .green {
            background-color: green;
        }

        .pink {
            background-color: pink;
        }

        .gray {
            background-color: gray;
        }
    </style>
</head>
<body>
<h3>prepend()方法前追加内容</h3>
<h3>prependTo()方法前追加内容</h3>
<h3>append()方法后追加内容</h3>
<h3>appendTo()方法后追加内容</h3>

<span class="red">男神</span>
<span class="blue">偶像</span>
<div class="green">
    <span>小鲜肉</span>
</div>
</body>
<!--
    创建元素和添加元素
        创建元素
            $("内容")
        添加元素
            1. 前追加子元素
                指定元素.prepend(内容)			在指定元素内部的最前面追加内容，内容可以是字符串、html元素或jquery对象。
                $(内容).prependTo(指定元素);		把内容追加到指定元素内部的最前面，内容可以是字符串、html元素或jquery对象。

            2. 后追加子元素
                指定元素.append(内容)			在指定元素内部的最后面追加内容，内容可以是字符串、html元素或jquery对象。
                $(内容).appendTo(指定元素);		把内容追加到指定元素内部的最后面，内容可以是字符串、html元素或jquery对象。

            3. 前追加同级元素
                before()						在指定元素的前面追加内容
            4. 后追加同级元素
                after()							在指定元素的后面追加内容

            注：
                在添加元素时，如果元素本身不存在（新建的元素），此时会将元素追加到指定位置；
                如果元素本身存在（已有元素），会将原来元素直接剪切设置到指定位置
 -->
<script src="js/jquery.min.js"></script>
<script type="text/javascript">
    // 创建元素
    var p = "<p>这是一个p标签</p>";
    console.log(p);
    console.log($(p));

    /* 添加元素 */
    // 创建元素
    var span = "<span>小奶狗</span>";
    // 得到指定元素，并在元素的内部最前面追加内容
    $(".green").prepend(span);
    var span2 = "<span>小狼狗</span>";
    $(span2).prependTo($(".green"));

    var span3 = "<span>小奶狗1</span>";
    var span4 = "<span>小奶狗2</span>";
    $(".green").append(span3);
    $(span4).appendTo($(".green"));

    // 将已存在内容追加到指定元素中
    $(".green").append($(".red"));


    /* 同级追加 */
    var sp1 = "<span class='pink'>女神</span>";
    var sp2 = "<span class='gray'>歌手</span>";

    $(".blue").before(sp1);
    $(".blue").after(sp2);
</script>
</html>
